<template>
  <div class="bannermodelbox">
    <el-dialog
      :showClose="false"
      :title="enterType === 1 ? '添加' : '修改'"
      :visible.sync="localCenterDialogVisible"
      height="40%"
      center
      width="30%"
    >
      <el-form label-width="100px" :model="List">
        <!-- <el-form-item label="Banner名称">
          <el-input v-model="List.bannerName"></el-input>
        </el-form-item> -->
        <el-form-item label="排序">
          <el-input v-model="List.sort"></el-input>
        </el-form-item>
        <el-form-item label="展示类型">
          <el-radio-group v-model="List.count" @input="radioType">
            <el-radio :label="4">一行</el-radio>
            <el-radio :label="8">两行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示图片">
          <el-upload
            :class="{ uploadBox_hide: hideUploadEdit }"
            :key="uploadKey"
            :action="uploadURL"
            :file-list="fileList"
            list-type="picture-card"
            :show-file-list="true"
            :auto-upload="true"
            :on-success="picturesuccess"
            :before-upload="picturebefore"
            :on-error="pictureerror"
            :on-exceed="pictureexceed"
            :on-change="handleEditChange"
            :limit="1"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.imgUrl"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <!-- <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview2(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span> -->
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="跳转类型">
          <el-radio-group v-model="List.type" @input="radioType">
            <el-radio :label="1">一级分类</el-radio>
            <!-- <el-radio :label="2">活动</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类名称">
          <!-- {{ List.bName }} -->
          <el-input style="width: 78%" v-model="List.categoryName"></el-input>
          <el-button type="primary" @click="dialogTableVisible = true"
            >选择分类</el-button
          >
        </el-form-item>
        <el-form-item label="是否启用">
          <!-- {{ List.status }} -->
          <!-- <el-input v-model="List.status"></el-input> -->
          <el-radio-group v-model="List.status" @input="radioEnabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelgoodesmodel">取 消</el-button>
        <el-button type="primary" @click="savegoodesmodel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog
      title="选择分类"
      height="40%"
      center
      width="30%"
      :visible.sync="dialogTableVisible"
    >
      <!-- <div style="margin-bottom: 20px">
        <el-input
          v-model="GoodsName"
          style="width: 300px; margin-right: 10px"
          placeholder="请输入商品名称"
          @change="GoodsNameHandle"
        ></el-input
        ><el-button
          @click="GoodsNameHandle"
          type="primary"
          icon="el-icon-search"
          >搜索</el-button
        >
      </div> -->

      <el-table
        v-loading="nameloading"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="goodsList"
        border
      >
        <!-- <el-table-column property="mallName" label="店铺名称" width="232">
        </el-table-column> -->
        <el-table-column
          property="categoryName"
          label="商品"
 
        ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >确认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        style="margin-top: 20px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination> -->
    </el-dialog>
  </div>
</template>

<script>
import { getGoods } from "@/api/mallApi/goodsOnsell/goodsOnsell";
import {
  AddBanner,
  editBanner,
  InsertHomepage,
  UpdateHomepage,
  QueryHomepage,
  BatchUpdateHomepage,
  QueryClassification,
} from "@/api/mallApi/managementend/mallset";
import { cloud } from "@/framework/utils/request";
export default {
  name: "HomeSetModel",
  components: {},
  props: {
    centerDialogVisible: Boolean,
    enterType: Number,
    currentRow: Object,
  },
  data() {
    return {
      localCenterDialogVisible: this.centerDialogVisible,
      nameloading: false,
      currentPage: 1,
      pageSize: 10,
      total: null,
      goodsList: [],
      GoodsName: "",
      dialogTableVisible: false,
      hideUploadEdit: false,
      uploadKey: 0,
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      uploadURL:
        process.env.VUE_APP_BASE_API +
        cloud.file +
        "/sysFileInfo/upload?secretFlag=N&fileBucket=mall",

      List: {
        id: null, 
        categoryId: null, //分类id 
        activityId: null, //活动id 
        type: 1, //1:一级分类 2:活动 
        img: "", //图片 
        sort: 0, //排序 
        status: 1, //1:启用 2 禁用 
        count: 4, //4：一行 8：两行 
        categoryName: "", //分类名称 
      },
    };
  },
  methods: {
    radioEnabled(e) {},
    radioType(e) {},
    handleSizeChange(e) {},
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getGoodsList();
    },
    GoodsNameHandle() {
      this.getGoodsList();
    },
    cancelgoodesmodel() {
      this.$emit("cancelgoodesmodel", false);
    }, // 取消按钮 传值
    savegoodesmodel() {
      if (this.enterType === 1) {
        InsertHomepage(this.List).then((res) => {
          if (res.code === "00000") {
            this.$message({
              message: "添加成功！",
              type: "success",
            });
            this.cancelgoodesmodel();
            this.$emit("refresh-banners");
          }
        });
      } else if (this.enterType === 2) {
        UpdateHomepage(this.List).then((res) => {
          if (res.code === "00000") {
            this.$message({
              message: "编辑成功！",
              type: "success",
            });
            this.cancelgoodesmodel();
            this.$emit("refresh-banners");
          }
        });
      }
    },
    //图片上传
    // on-change添加文件，上传成功和上传失败时都会被调用
    handleEditChange(file, fileList) {
      this.hideUploadEdit = this.fileList.length >= fileList.length;
    },
    picturesuccess(response, file, fileList) {
      file.imgUrl = response.data.fileUrl;
      this.List.img = response.data.fileUrl;
      // this.addgoodsinfo.imgList.push({
      //   goodsId: null,
      //   mallCode: null,
      //   type: "cover_photo",
      //   img: response.data.fileUrl,
      // });
      this.fileList.push({
        imgUrl: response.data.fileUrl,
      });
    },
    pictureerror(response, file, fileList) {},
    picturebefore(file) {
      const isJPG = file.type === "image/jpeg" || "image/png" || "image/jpg";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPEG,JPG,PNG 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过10MB!");
      }
      this.uploadKey += 1;
      return isJPG && isLt10M;
    }, //图片大小格式校验
    pictureexceed(files, fileList) {
      if (fileList.length >= 4) {
        this.$message.error("图片最多上传1张!");
      }
    }, //图片限制提示
    handleRemove(file) {
      // 移除图片
      const index = this.fileList.indexOf(file);
      if (index !== -1) {
        this.fileList.splice(index, 1);
      }
      this.hideUploadEdit = !(this.fileList.length === 0);
      //判断移除的 url是否存在 参数中，如果存在 则删除
      // const imgIndex = this.addgoodsinfo.imgList.findIndex(
      //   (img) => img.img === file.imgUrl
      // );

      // if (imgIndex !== -1) {
      //   this.addgoodsinfo.imgList.splice(imgIndex, 1);
      // }
    },
    clearImages() {
      // 清空图片列表
      this.fileList = [];
    },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
    getGoodsList() {
      this.nameloading = true;
      QueryClassification().then((res) => {
        if (res.code === "00000") {
          this.nameloading = false;
          this.goodsList = res.data;
        }
      });
      //   this.nameloading = true;
      //   const params = {
      //     pageNum: this.currentPage,
      //     pageSize: this.pageSize,
      //     isPage: 1,
      //     name: this.GoodsName,
      //     parentCategoryId: "",
      //     categoryId: "",
      //     ptStatus: 2,
      //     status: 2,
      //     isDelete: 0,
      //     type: "pt",
      //   };
      //   getGoods(params)
      //     .then((res) => {
      //       if (res.code === "00000") {
      //         this.nameloading = false;
      //         this.goodsList = res.data.list;
      //         this.total = Number(res.data.total);
      //       }
      //     })
      //     .catch((error) => {});
    },
    handleEdit(e) {
      this.List.categoryName = e.categoryName;
      this.List.categoryId = e.id;
      this.dialogTableVisible = false;
    },
  },
  mounted() {
    if (this.enterType === 2) {
      this.List = this.currentRow;
      this.fileList.push({
        imgUrl: this.currentRow.img,
      });
      this.hideUploadEdit = this.fileList.length >= 1;
    }
    this.getGoodsList();
  },
  created() {},
  watch: {
    centerDialogVisible(newVal) {
      // 监听 centerDialogVisible 的变化
      if (!newVal) {
        // 当 centerDialogVisible 变为 false 时触发事件
        this.localCenterDialogVisible = newVal;
        this.$emit("close-dialog");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./banner-models.scss";
</style>
